import {
  deleteRuleScriptNode,
  reloadScriptNode,
  ruleScriptNodeList,
} from '@/services/wms-dev-tool/business-page-list';
import { useRequest } from '@@/plugin-request';
import { PlusOutlined } from '@ant-design/icons';
import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
import { Button, Drawer, message, Popconfirm } from 'antd';
import { useEffect, useRef, useState } from 'react';
import RuleScriptNodeEditForm from './RuleScriptNodeEditForm';

const RuleScriptNodeListDrawer = (props: any) => {
  const actionRef = useRef<ActionType>();
  const [rsnEditFormOpen, handleRsnEditFormOpen] = useState<boolean>(false);
  const [currentRow, setCurrentRow] = useState<API.RuleScriptNode>();
  const [editType, setEditType] = useState<string>('add');
  //刷新表格
  const refreshTable = () => {
    if (actionRef.current) {
      actionRef.current.reload();
    }
  };

  const onClose = () => {
    props.handleRsnDrawerOpen(false);
  };

  useEffect(() => {
    // 在 props 变化时更新 state
    if (props.rsnDrawerOpen) {
      refreshTable();
    }
  }, [props.rsnDrawerOpen]);

  const { run: delRun } = useRequest(deleteRuleScriptNode, {
    manual: true,
    onSuccess: () => {
      message.success('删除成功');
      refreshTable();
    },
  });

  //定义表格的数据列
  const columns: ProColumns<API.RuleScriptNode>[] = [
    {
      title: <span>脚本标识</span>,
      width: 150,
      dataIndex: 'scriptId',
      ellipsis: true,
      search: {
        transform: (value) => {
          return { scriptId: `*${value}*` };
        },
      },
    },
    {
      title: <span>脚本名称</span>,
      dataIndex: 'scriptName',
      ellipsis: true,
      search: {
        transform: (value) => {
          return { scriptName: `*${value}*` };
        },
      },
    },
    {
      title: <span>脚本内容</span>,
      dataIndex: 'scriptData',
      ellipsis: true,
      search: false,
    },
    {
      title: <span>节点类型</span>,
      dataIndex: 'scriptType',
      ellipsis: true,
      render: (dom, record) => {
        switch (record.scriptType) {
          case 'script':
            return <span>普通节点</span>;
          case 'switch_script':
            return <span>选择节点</span>;
          case 'if_script':
            return <span>条件节点</span>;
          case 'for_script':
            return <span>数量循环节点</span>;
          case 'while_script':
            return <span>条件循环节点</span>;
          case 'break_script':
            return <span>退出循环节点</span>;
        }
      },
      search: {
        transform: (value) => {
          return { code: `*${value}*` };
        },
      },
    },
    {
      title: <span>脚本语言</span>,
      dataIndex: 'scriptLanguage',
      ellipsis: true,
    },
    {
      title: <span>修改时间</span>,
      dataIndex: 'updateTime',
      width: 150,
      ellipsis: true,
    },
    {
      title: <span>操作</span>,
      dataIndex: 'option',
      width: 200,
      valueType: 'option',
      render: (dom, record) => [
        <a
          key="edit"
          onClick={() => {
            setEditType('edit');
            setCurrentRow(record);
            handleRsnEditFormOpen(true);
          }}
        >
          编辑
        </a>,
        <a
          key="refresh"
          onClick={async () => {
            const { message: msg, success } = await reloadScriptNode(record);
            if (success) {
              message.success(msg);
              return;
            }
          }}
        >
          刷新脚本
        </a>,
        <Popconfirm
          key="delete"
          title="提示"
          description="是否删除该条记录？请确认你在规则中没有引用到该节点！"
          onConfirm={() => delRun(record.id)}
          okText="是"
          cancelText="否"
        >
          <a>删除</a>
        </Popconfirm>,
      ],
    },
  ];

  // @ts-ignore
  return (
    <>
      <Drawer
        title="组件脚本配置"
        placement="right"
        open={props.rsnDrawerOpen}
        onClose={onClose}
        width="1000px"
      >
        <ProTable<API.RuleScriptNode, API.PageParams>
          headerTitle={<span>组件脚本配置</span>}
          actionRef={actionRef}
          rowKey="id"
          search={{
            labelWidth: 120,
          }}
          toolBarRender={() => [
            <Button
              type="primary"
              key="primary"
              onClick={() => {
                setEditType('add');
                handleRsnEditFormOpen(true);
              }}
            >
              <PlusOutlined />
              新建
            </Button>,
          ]}
          request={(params: any, sort, filter) => {
            params.pageId = props.pageId;
            return ruleScriptNodeList(params, sort, filter);
          }}
          columns={columns}
        />
      </Drawer>
      <RuleScriptNodeEditForm
        rsnEditFormOpen={rsnEditFormOpen}
        handleRsnEditFormOpen={handleRsnEditFormOpen}
        ok={refreshTable}
        values={editType === 'edit' ? currentRow : {}}
        pageId={props.pageId}
        editType={editType}
      ></RuleScriptNodeEditForm>
    </>
  );
};

export default RuleScriptNodeListDrawer;
